<template>
  <div class="app-container">
    <div class="nav-search">
      <el-select v-model="searchParams.packageRuleType" placeholder="选择规则类型">
        <el-option
          v-for="(item,index) in dict.package_rule_type"
          :key="index"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-input v-model="searchParams.serachStr" placeholder="搜索产品名称/医生患者名称/诊所集团名称"></el-input>
      <el-date-picker
        v-model="searchParams.createDate"
        :clearable="false"
        type="date"
        value-format="yyyy-MM-dd"
        format="yyyy-MM-dd"
        placeholder="规则创建时间"
      >
      </el-date-picker>
      <span>
        <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
        <el-button class="filter-item" size="mini" type="warning" icon="el-icon-search" @click="toReset">重置</el-button>
      </span>
      <div class="tableHandle">
        <el-button class="filter-item" size="mini" type="success" @click="addRules">新增规则</el-button>
      </div>
    </div>
    <div class="tableList">
      <el-table
        ref="table"
        v-loading="loading"
        stripe
        :data="tableData"
        size="small"
        style="width: 100%;"
      >
        <el-table-column prop="id" label="规则编号"></el-table-column>
        <el-table-column prop="ruleType" label="规则类型">
          <template slot-scope="scope">
            {{ getDictName(scope.row.ruleType,dict.package_rule_type) }}
          </template>
        </el-table-column>
        <el-table-column prop="productNames" label="产品名称"></el-table-column>
        <el-table-column label="规则状态">
          <template slot-scope="scope">
            <span>{{ scope.row.enabled == 1 ? "启用" : "禁用" }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="ruleName" label="规则名称"></el-table-column>
        <el-table-column prop="createDate" label="创建时间" width="140px">
          <template slot-scope="scope">
            {{ parseTime(scope.row.createDate) }}
          </template>
        </el-table-column>
        <el-table-column prop="patientCount" label="患者">
          <template slot-scope="scope">
            <a href="javascript:void(0);" style="color: #2688B3;text-decoration: underline;" @click="linkSearch('/oper/patient/skip',scope.row.ruleName)">{{ scope.row.patientCount }}</a>
          </template>
        </el-table-column>
        <el-table-column prop="doctorCount" label="医生">
          <template slot-scope="scope">
            <a href="javascript:void(0);" style="color: #2688B3;text-decoration: underline;" @click="linkSearch('/oper/doctor',scope.row.ruleName)">{{ scope.row.doctorCount }}</a>
          </template>
        </el-table-column>
        <el-table-column prop="clinicCount" label="诊所">
          <template slot-scope="scope">
            <a href="javascript:void(0);" style="color: #2688B3;text-decoration: underline;" @click="linkSearch('/oper/clinic',scope.row.ruleName)">{{ scope.row.clinicCount }}</a>
          </template>
        </el-table-column>
        <el-table-column prop="groupCount" label="集团">
          <template slot-scope="scope">
            <a href="javascript:void(0);" style="color: #2688B3;text-decoration: underline;" @click="linkSearch('/oper/bloc/skip',scope.row.ruleName)">{{ scope.row.groupCount }}</a>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150px">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button v-if="scope.row.enabled == '1'" size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">禁用</el-button>
            <el-button v-else size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">启用</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <el-pagination
        background
        :page-size.sync="page.size"
        :total="total"
        :current-page.sync="page.page"
        style="margin-top: 8px; text-align: right;"
        layout="total, prev, pager, next, sizes"
        @size-change="sizeChangeHandler($event)"
        @current-change="pageChangeHandler"
      ></el-pagination>
    </div>
    <div class="dialog">
      <el-dialog
        :visible.sync="dialogVisible"
        width="30%"
        append-to-body
        :modal="false"
      >
        <span slot="title" class="dialog-title">{{ dialogTitle }}</span>
        <productRulesDialog :callback="callback" :row-id="rowId"></productRulesDialog>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { queryProductRules, editProductRules } from '@/api/product';
import { mapGetters, mapMutations } from 'vuex';
import { parseTime, getDictName } from '@/utils/index';
import productRulesDialog from '@/views/oper/productRules/productRulesDialog';

export default {
  components: {
    productRulesDialog
  },
  dicts: ['package_rule', 'package_rule_type'],
  data() {
    return {
      loading: false,
      dialogVisible: false,
      dialogTitle: '',
      searchParams: {
        createDate: '', // 创建时间
        packageRuleType: '', // 规则类型 dict=package_rule_type
        serachStr: '' // 搜索信息
      },
      page: {
        page: 0,
        size: 10
      },
      tableData: [],
      total: 0,
      rowId: ''
    };
  },
  computed: {
    ...mapGetters(['searchInfo', 'user'])
  },
  watch: {},
  mounted() {
    this.getProductRules({ pageIndex: 0, pageSize: 10 });
    console.log('dict.package_rule_type----', this.dict.package_rule_type);
    // let a = this.getDictName("01",this.dict.package_rule_type);
    // console.log("获取字典值了！！！",a);
  },
  methods: {
    ...mapMutations({
      'CHANGE_LINKSEARCH': 'settings/CHANGE_LINKSEARCH'
    }),
    parseTime,
    getDictName,
    // 获取产品规则列表
    getProductRules(params) {
      this.loading = true;
      queryProductRules(params)
        .then(res => {
          console.log('hellow nihao', res);
          this.tableData = res.content || [];
          this.total = res.totalElements || 0;
          this.loading = false;
        })
        .catch(er => {
          this.loading = false;
        });
    },
    // 搜索
    toQuery() {
      const search = {
        pageIndex: this.page.page - 1,
        pageSize: this.page.size,
        ...this.searchParams
      };
      this.getProductRules(search);
    },
    // 重置
    toReset() {
      this.searchParams.createDate = '';
      this.searchParams.packageRuleType = '';
      this.searchParams.serachStr = '';
      this.toQuery();
    },
    // 新增
    addRules() {
      this.dialogVisible = true;
      this.dialogTitle = '新增规则';
      this.rowId = '';
    },
    // 编辑
    handleEdit(index, row) {
      this.dialogVisible = true;
      this.dialogTitle = '编辑规则';
      this.rowId = row.id;
    },
    // 禁用&启用
    handleDelete(index, row) {
      const param = {
        'createBy': row.createBy,
        'enabled': parseInt(row.enabled) === 1 ? 0 : 1,
        'id': row.id,
        'packageIds': row.packageIdList,
        'phase': row.phaseList,
        'productIds': row.productIdList,
        'ruleName': row.ruleName,
        'rules': row.ruleList
      };
      const msg = parseInt(row.enabled) === 1 ? '禁用' : '启用';
      this.$confirm('此操作将' + msg + ', 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        editProductRules(param).then(res => {
          this.$notify({
            title: '提示',
            message: msg + '成功',
            type: 'success',
            duration: 5000
          });
          this.getProductRules({ pageIndex: 0, pageSize: 10 });
        });
      });
    },
    sizeChangeHandler() {
      this.toQuery();
    },
    // 页数变更
    pageChangeHandler(pageIndex) {
      this.toQuery();
    },
    callback(type) {
      if (type === '0') {
        this.dialogVisible = false;
      } else if (type === '1') {
        this.dialogVisible = false;
        this.getProductRules({ pageIndex: 0, pageSize: 10 });
      }
    },
    // 列表链接跳转
    linkSearch(link, name) {
      this.CHANGE_LINKSEARCH(name);
      this.$router.push({ path: link });
    }
  }
};
</script>
<style scoped lang='scss'>
.nav-search {
  padding: 10px 0;
  .el-input {
    width: 320px;
    margin-right: 10px;
  }
  .el-date-editor--date {
    width: 150px;
  }
}
.tableHandle {
  float: right;
  margin: 0;
  padding: 0;
  margin-top: 4px;
}
.searchForm {
  width: 49%;
  display: inline-block;
  margin: 5px 0px;
}
.dialog {
  .dialog-title {
    color: #fff;
  }
}
</style>
